<template>
	<div class="lefNav">
		<el-menu
			@open="handleOpen"
			@close="handleClose"
			background-color="#425166"
			text-color="#fff"
			active-text-color="#fff"
			:router="isRouter"
			:unique-opened="isUniqueOpened"
		>
			<el-submenu
				v-for="item in this.leftNavList"
				:index="item.path"
				:key="item.id"
			>
				<template slot="title">
					<i :class="'iconfont icon ' + item.iconClass"></i>
					<span>{{ item.name }}</span>
				</template>

				<el-menu-item
					v-for="(item1, index) in item.children"
					:key="index"
					:index="item1.path"
				>
					<i class="iconfont icon1 icon-yuandianxiao"></i>
					{{ item1.name }}
				</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>
<script>
export default {
	data() {
		return {
			leftNavList: [],
			titleList: [
				"goods",
				"purchase",
				"stock",
				"promotion",
				"Retail",
				"member",
			],
			// 启动路由模式
			isRouter: true,
			// 保持只有一个展开
			isUniqueOpened: true,
		}
	},
	methods: {
		handleOpen(key, keyPath) {
			// 防止刷新回收在点击的bug
			// 获取当前的url
			const dqUrl = this.$route.path
			const pathList = dqUrl.split("/")
			if (pathList.includes(key)) {
				return
			} else {
				// 防止点击另外一个直接在后面拼接
				if (this.titleList.includes(key)) {
					this.$router.push("/home")
				}
				this.$router.push(key)
				// this.$router.push("home/" + key + "/")
			}
		},
		handleClose(key, keyPath) {
			this.$router.push("/home")
		}
	},
	filters: {},
	beforeDestroy() {},
	created() {
		// 请求导航菜单数据
		this.$http.get("https://getman.cn/mock/gxjy/get/leftNav").then(ret => {
			this.leftNavList = ret[0].data
		})
	},
}
</script>
<style lang="scss" scoped>
@import "../../assets/scss/leftNav.scss";
</style>
